<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>vue2</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
    <style type="text/css">
      .ui.vertical.stripe h3 {
        font-size: 2em;
      }
      .secondary.pointing.menu .toc.item {
        display: none;
      }
      .vuetable {
        margin-top: 1em !important;
      }
      .vuetable-wrapper.ui.basic.segment {
        padding: 0em;
      }
      .vuetable button.ui.button {
        padding: .5em .5em;
        font-weight: 400;
      }
      .vuetable button.ui.button i.icon {
        margin: 0;
      }
      .vuetable td i.handle-icon:hover {
        cursor: pointer;
      }
      .vuetable-actions {
        width: 15%;
        padding: 12px 0px;
        text-align: center;
      }
      .vuetable-pagination {
        background: #f9fafb !important;
      }
      .vuetable-pagination-info {
        margin-top: auto;
        margin-bottom: auto;
      }
      .highlight {
        background-color: yellow;
      }
      .vuetable-detail-row {
        height: 200px;
      }
      .detail-row {
        margin-left: 40px;
      }
      .expand-transition {
        transition: all .5s ease;
      }
      .expand-enter, .expand-leave {
        height: 0;
        opacity: 0;
      }
      tr.odd {
        background-color: #e6f5ff;
      }
      body {
        overflow-y: scroll;
      }
    </style>

  </head>
  <body>

    <div class="ui vertical segment">
      <div class="ui container">

        <div id="app" class="ui vertical stripe segment">

              <div id="content" class="ui basic segment">

                  <h3 class="ui header">List of Users</h3>

                  <div class="ui grid">
                      <div class="ui left aligned nine wide column">
                          <div class="ui labeled icon input">
                            <div class="ui label">Search:</div>
                            <input v-model="searchFor" class="ui input" @keyup.enter="setFilter">
                            <i class="search icon"></i>
                          </div>
                          <button class="ui button primary" @click="setFilter">Go</button>
                          <button class="ui button" @click="resetFilter">Reset</button>
                      </div>
                      <div class="ui right aligned seven wide column">
                        <button class="ui basic button" id="settingsBtn" @click="showSettingsModal">
                          <i class="setting icon"></i>
                          Settings
                        </button>
                      </div>
                  </div><!-- ui grid -->

                  <div :class="[{'vuetable-wrapper ui basic segment': true}, loading]">

                    <vuetable ref="vuetable"
                      api-url="http://vuetable.ratiw.net/api/users"
                      :fields="fields"
                      :table-height="tableHeight"
                      pagination-path="pagination"
                      :sort-order="sortOrder"
                      :multi-sort="multiSort"
                      :per-page="perPage"
                      :append-params="moreParams"
                      detail-row-component="my-detail-row"
                      detail-row-transition="expand"
                      :row-class="rowClassCB"
                      @vuetable:pagination-data="onPaginationData"
                      @vuetable:load-success="onLoadSuccess"
                      @vuetable:loading="showLoader"
                      @vuetable:loaded="hideLoader"
                      @vuetable:cell-clicked="onCellClicked"
                      @vuetable:initialized="onInitialized"
                      @vuetable:data-reset="onDataReset"
                    ></vuetable>
                    <div class="vuetable-pagination ui bottom attached segment grid">
                      <vuetable-pagination-info ref="paginationInfo"
                        :info-template="paginationInfoTemplate"
                      ></vuetable-pagination-info>
                      <component :is="paginationComponent" ref="pagination"
                        @vuetable-pagination:change-page="onChangePage"
                      ></component>
                    </div>

                  </div><!-- vuetable-wrapper -->

                  <settings-modal ref="settingsModal"
                    :vuetable-fields="vuetableFields"
                  ></settings-modal>

                </div><!-- content -->

            </div><!-- app -->
        </div><!-- ui container -->

    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
  </body>
</html>
